<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
</head>
<body>
<!--
    实现随着用户访问路径不同，加载不同的组件在主页面中进行渲染
    使用vue当中的路由插件  VueRouter

    使用路由的步骤:
        1.  定义路由列表     哪个路径  对应哪个组件
        2.  定义路由对象    将路由列表传入路由对象
        3.  将路由对象注册在vm中
        spa     组件  +  路由
-->

<div id="app">
    <App></App>
</div>


<script>

    const login = {
        name:'Login',
        template: `
            <div>
                <h3>欢迎登录</h3>
                <form action="#">
                    <p><input type="text" name="username" placeholder="请输入用户名"></p>
                    <p><input type="password" name="password" placeholder="请输入密码"></p>
                    <p><input type="submit"  value="立即登录"></p>
                </form>
            </div>
        `
    }

    const register = {
        name:'Register',
        template: `
            <div>
                <h3>欢迎注册</h3>
                <form action="#">
                    <p><input type="text" name="username" placeholder="请输入用户名"></p>
                    <p><input type="password" name="password" placeholder="请输入密码"></p>
                    <p><input type="submit"  value="立即注册"></p>
                </form>
            </div>
        `
    }

    const  filenotfound = {
        template:`
            <div>页面找不到了o(╯□╰)o</div>
        `
    }
    //设置路由的出口
    const app = {
        template: `
            <div>

               <router-view></router-view>

                <a href="#/login">登录</a>
                <a href="#/register">注册</a>
                <hr>
                <router-link to="/login">登录</router-link>
                <router-link to="/register">注册</router-link>
                <hr>
                <router-link :to="{path:'/login'}">登录</router-link>
                <router-link :to="{path:'/register'}">注册</router-link>

                <hr>
                <router-link :to="{name:'login'}">登录</router-link>
                <router-link :to="{name:'register'}">注册</router-link>

                <hr>
                <button @click="login">登录</button>
                <button @click="register">注册</button>

            </div>
        `,
        components: {
            login, register
        },
        methods: {
            login(){
                //  通过js代码实现路由切换  this.$router  获取路由管理对象 实现路由切换
                // console.log(this.$router)
                // this.$router.push("/login")

                // this.$route  当前路由对象
                console.log(this.$route)
                if (this.$route.path!='/login'){
                    // this.$router.push({path:'/login'})
                    this.$router.push({name:'login'})
                }
            },
            register(){
                // this.$router.push("/register")
                if (this.$route.path!='/register'){
                    this.$router.push({path:'/register'})
                }
            }
        }
    }

    // 1.定义路由列表
    const routes = [
        {
            path: '/',
            redirect:'/login'   //  路径的重定向
        },
        {
            path: '/login',
            name:'login',
            component: login
        },
        {
            path: '/register',
            name:'register',
            component: register
        },
        {
            path: '/*',
            component: filenotfound
        }
    ]

    //2. 创建路由对象  VueRouter
    const  router = new VueRouter({
        routes
    })

    const vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            app
        },
        router    //  注册路由
    })
</script>

</body>
</html>
